<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>新增分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="父节点">
                        <el-select v-model="form.parentId" placeholder="请选择">
                            <el-option key="0" label="根节点" value="0"></el-option>
                            <!--将parents循环。获取每一项的值，一定要将属性绑定，不然显示的是字符串-->
                            <el-option v-for="category in parents" :key="category.id" :label="category.name" :value="category.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="form.isShow">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit()">新增</el-button>
                        <el-button @click="cancel()">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'form',
        data: function(){
            return {
                form: {
                    name: '',
                    parentId: '0',
                    isShow: '1'
                },
                parents:[]
            }
        },
        activated(){
            this.getParent();
        },
        created(){
            this.getParent();
        },
        methods: {
            //点击按钮，新增表单
            onSubmit() {
                let self =this;
                // let varForm = self.form;
                // console.log(varForm)
                let url = this.HOST + "/category"
                this.$axios.post(url,{
                    name:self.form.name,
                    parentId:self.form.parentId,
                    isShow:self.form.isShow
                }).then(res=>{
                    if (res.data.code === 100) {
                        self.$message.success(res.data.mesg);
                        //处理表单重置
                        self.form.name = '';
                        self.form.parentId = '0';
                        self.form.isShow = '1';
                        self.$router.push('/category/table');
                    } else {
                        self.$message.error(res.data.mesg)
                    }
                })
            },
            getParent() {
                //查询全部分类，使用parents保存下来，再通过下拉框循环输出
                let self = this;
                let url = this.HOST + "/category/all"
                this.$axios.post(url, {
                    parentId:0
                }).then((res) => {
                    // console.log(res.data)
                    if (res.data.code === 100) {
                        self.parents=res.data.data;
                        console.log(res.data.data)
                    } else {
                        self.$message.error(res.data.mesg)
                    }
                })
            },
            cancel(){
                this.$router.go(-1);
            }
        }
    }
</script>
<!--增-->
<!--1 增加页面要有默认页面-->
<!--2当输入完页面,点击确定进行跳转,点击取消,就返回之前的页面-->
<!--3 当跳转到新页面,增加页面必须回到默认页面-->
<!--4 添加到主页面时,必须刷新页面 actived-->
<!--5 下拉框 先写死一条数据,作为默认数据.其余数据定义一个对象,通过接口拿到,再循环到页面上-->